<template>
    <div>   
        <el-table
        height="700"
        :data="data"
        style="width: 100%">
        <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="详情页">
                        <div v-html="props.row.summary"></div>
                    </el-form-item>
                    
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
            fixed
            prop="id"
            label="id"
            width="50">
            </el-table-column>
            <el-table-column
            prop="name"
            label="商品名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="price"
            label="价格">
            </el-table-column>
            <el-table-column
            prop="stock"
            label="库存">
            </el-table-column>
            <el-table-column
            prop="main_img_url"
             width="100"
            label="缩略图">
                <template slot-scope="scope">
                    <img  :src="scope.row.main_img_url" alt="" style="width: 50px;height: 50px">
                </template>
            </el-table-column>

            <el-table-column
            width="300"
            prop="imgs"
            label="主图">
                <template slot-scope="scope">
                    <img 
                    v-for="(item) in scope.row.imgs" 
                    :key="item.id"  
                    :src="item.img_url.url" alt="" style="width: 50px;height: 50px">
                </template>
            </el-table-column>

            <el-table-column
            fixed="right"
            label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    v-show='scope.row.onShow==1'
                    size="mini"
                    type='danger'
                    @click="handleDown(scope.$index, scope.row)">下架</el-button>
                    <el-button
                    v-show='scope.row.onShow==0'
                    size="mini"
                    type='success'
                    @click="handleDown(scope.$index, scope.row)">上架</el-button>

                    

                    <el-button
                    size="mini"
                    type="danger" 
                    plain
                    
                    
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        class='pagination'
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[9]"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total">
        </el-pagination>

    </div>
</template>

<script>
import axios from 'axios'
import { mapState,mapMutations } from 'vuex'
export default {
    name:'Table',
    data() {
        return {
            total:1,
            page: 1,
            size:9,
            
            data:[],
            
            
            
        }
    },
    computed:{
        ...mapState(['baseUrl','currentPage','infoChange'])
    },
    mounted() {
        this.getListInfoByPage()
    },
    activated() {
        // console.log(this.infoChange)
        if(this.infoChange==true){
            this.getListInfoByPage();
            this.changeInfo(false);
        }
        
    },
    methods: {
        getListInfoByPage (){
            // console.log(this.baseUrl)
            // console.log(this.currentPage)
            axios.get(
                this.baseUrl+'product/all',
                {
                    params:{
                        size:this.size,
                        page:this.currentPage
                    }
                })
            .then(this.getInfoSucc)
        },
        getInfoSucc (response){
            console.log(response)
            this.data = response.data.data
            this.total = response.data.count
            this.page = parseInt(response.data.current_page)
            // console.log(this.currentPage)
            
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.size = val
            this.getListInfoByPage()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.page = val
            this.changeCurrentPage(val)
            this.getListInfoByPage()
            // console.log(localStorage)
            
        },
        ...mapMutations(['changeCurrentPage','changeInfo']),
         handleEdit(index, row) {
            console.log(index);
            console.log(row)
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        handleDown(index, row){
            console.log(index, row);
        }
    },
    
}
</script>

<style lang="stylus" scoped>
.pagination
    margin 0 auto
                .name-wrapper
                    display inline-block    
</style>
  